<template>
  <div class="index">
    <div class="index-head">
      <navigation></navigation>
    </div>
    <div class="index-main">
      <article>
        <ul>
          <li v-for="item in listCategoryData" :key="item.id">     
            <section>
              <img :src="item.categoryIcon" class="img-responsive" :alt="item.categoryName"/>
            </section>                
          </li>
        </ul>
      </article>
    </div>
  </div>
</template>

<script>
//导入组件
import indexApi from "@/api/index";
import navigation from "@/components/Navigation.vue";

export default {
  name: "Index",
  //注册组件
  components: {
    navigation,
  },
  data() {
    return {
      listCategoryData: [],
    };
  },
  created() {
    this.listCategoryTree();
  },
  methods: {
    listCategoryTree() {
      indexApi.listCategoryTree().then((response) => {
        this.listCategoryData = response.data.data;
        console.log(this.listCategoryData);
      });
    },
  },
};
</script>

<style>
* {
  margin: 0;
  padding: 0;
}
.index {
  height: 100vh;
  width: 100vw;
}
.index-head {
  width: 100%;
  height: 60px;
}
.index-main {
  width: 100%;
  height: 93%;
  background-color: rgb(111, 156, 240);
}
.img-responsive{
  width: 100px;
  height: 100px;
}
</style>